<template>
  <view class="album_imgs">
    <view :style="{ marginRight: (index + 1) % 3 == 0 ? '0' : margin,
    marginBottom: (index + 1) <= lastRow * 3 && (index + 1) >= (lastRow - 1) * 3 ? '0' : margin }" 
    v-for="(img, index) in urls" :key="index">
      <u-image :src="img" :width="multipleSize" :height="multipleSize" @click="previewImg(index, urls)"></u-image>
    </view>
  </view>
</template>

<script>
export default {
  name: "album-list",
  props: {
    urls: {
      type: Array,
      default: []
    },
    multipleSize: {
      type: [String, Number],
      default: 70
    },
    space: {
      type: [String, Number],
      default: 10
    }
  },
  data() {
    return {}
  },
  computed: {
    margin() {
      if((typeof this.space) == 'number') {
        return this.space + 'px'
      }
      return this.space
    },
    lastRow() {
      return Math.floor(this.urls.length / 3) + 1
    }
  },
  methods: {
    previewImg(index, images) {
      uni.previewImage({
        urls: images,
        current: index
      })
    }
  },
} 
</script>

<style lang="scss" scoped>
.album_imgs {
  display: flex;
  flex-wrap: wrap;
  border-radius: 8px;
  overflow: hidden;

  // &::v-deep .u-transition {
  //   margin: 0 10px 10px 0;
  // }

  // &::v-deep .u-transition:nth-child(3n) {
  //   margin-right: 0;
  // }
}
</style>